<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target">target</div>
<script>
setup(() => {
  for (let name of ['--a', '--b', '--c']) {
    CSS.registerProperty({
      name,
      syntax: '<number>',
      initialValue: '0',
      inherits: false,
    });
  }
});

test(() => {
  // These keyframes are equivalent to: {
  // '--a': ['100', '200'],
  // '--b': ['100', '300'],
  // '--c': ['100', '400'],
  // }.
  let animation = target.animate({
    '--a': ['100', '200'],
    '--b': ['var(--a)', 'calc(var(--a) + 100)'],
    '--c': ['var(--b)', 'calc(var(--b) + 100)'],
  }, {
    duration: 100,
    fill: 'forwards',
  });

  animation.currentTime = 0;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '100', '--a at 0%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '100', '--b at 0%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '100', '--c at 0%');

  animation.currentTime = 25;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '125', '--a at 25%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '150', '--b at 25%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '175', '--c at 25%');

  animation.currentTime = 50;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '150', '--a at 50%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '200', '--b at 50%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '250', '--c at 50%');

  animation.currentTime = 75;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '175', '--a at 75%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '250', '--b at 75%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '325', '--c at 75%');

  animation.currentTime = 100;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '200', '--a at 100%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '300', '--b at 100%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '400', '--c at 100%');
}, 'Animated registered custom properties can var() reference each other to create a chain of dependencies.');
</script>
